<!DOCTYPE html>
<html lang="en">

<head>
    <title>SpringRoll Chat Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-uri-fit=no">

    <link rel="stylesheet" href="css/bootstrap.4.0.0-alpha.6.min.css">
    <link rel="stylesheet" href="css/chat.css">
</head>

<body>
<div id="app">
    <nav class="navbar navbar-inverse">
        <a class="navbar-brand" href="#">SpringRoll Chat Demo</a>
        <small>latency: {{ latency }} ms</small>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <nav class="col-sm-2 bg-faded members">
                <div class="row members-header">
                    <div class="col-sm-12">
                        Members
                    </div>
                </div>
                <div class="row members-body" v-cloak>
                    <ul class="list-group members-group">
                        <li class="list-group-item member-item justify-content-between bg-faded"
                            v-for="(value, key) in members">
                            <img v-bind:src="value.avatar" class="rounded-circle mr-1">
                            <small> {{ value.username }}</small>
                        </li>
                    </ul>
                </div>
            </nav>
            <main class="col-sm-10 offset-sm-2 messages-main">
                <div class="row messages-header">
                    <div class="col-sm-12">
                        Messages
                    </div>
                </div>
                <div class="row messages-body" v-cloak>
                    <div class="col-sm-12">
                        <ul class="list-group message-group">
                            <li class="list-group-item message-item d-flex" v-for="message in messages"
                                track-by="$index">
                                <img v-bind:src="message.avatar" class="rounded-circle float-left mr-2"> {{
                                message.message }}
                                <hr>
                                <small class="text-muted">{{ message.username }} @ {{ formatMessageDate(message.date) }}</small>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row messages-footer">
                    <div class="input-group">
                        <input type="text" class="form-control" v-focus="true" v-model="message" v-on:keyup.enter="send"
                               placeholder="Message text...">
                        <span class="input-group-btn"><button class="btn btn-primary" type="button" v-on:click="send">Send</button></span>
                    </div>
                </div>
            </main>
        </div>
    </div>
</div>

<script src="js/vue/2.1.10/vue.min.js"></script>
<script src="js/vue-focus/2.1.0/vue-focus.min.js"></script>
<script src="js/moment.js/2.17.1/moment.min.js"></script>
<script src="js/springroll.js"></script>

<script>
    function randomString(len, charSet) {
        charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var randomString = '';
        for(var i = 0; i < len; i++) {
            var randomPoz = Math.floor(Math.random() * charSet.length);
            randomString += charSet.substring(randomPoz, randomPoz + 1);
        }
        return randomString;
    }

    var chatUri = "/Chat";
    var myScreenName = randomString(5);
    var connection = new SpringRollConnection("ws://localhost:8080/roll", function() {
        connection.tell(chatUri, "Join", {
            chatterName: myScreenName
        });
    }, null, null, 30000, function(latency) {
        app.$data.latency = latency;
    });
    window.onbeforeunload = function() {
        connection.tell(chatUri, "Leave", {});
        connection.close();
    };

    var app = new Vue({
        el: '#app',
        mixins: [VueFocus.mixin],
        data: {
            message: '',
            messages: [],
            members: {},
            latency: "-"
        },
        methods: {
            send: function() {
                connection.tell(chatUri, "Say", {
                    content: this.message
                });
                this.message = '';
            },
            formatMemberDate: function(date) {
                return moment(date).format("h:mm:ss a");
            },
            formatMessageDate: function(date) {
                return moment(date).format("h:mm:ss a");
            }
        },
        mounted: function() {
            connection.on('Joined', function(message) {
                var members = {};
                for(var i = 0; i < message.allChatterNames.length; i++) {
                    members[message.allChatterNames[i]] = {
                        username: message.allChatterNames[i],
                        avatar: "images/avatar.png"
                    }
                }
                this.members = members;
            }.bind(this));
            connection.on('NotJoined', function(message) {
                if(console) console.warn("NotJoined, try another screenName", message);
                myScreenName = randomString(5);
                connection.tell(chatUri, "Join", {
                    chatterName: myScreenName
                });
            }.bind(this));
            connection.on('ChatterJoined', function(message) {
                Vue.set(this.members, message.chatterName, {
                    username: message.chatterName,
                    avatar: "images/avatar.png"
                });
            }.bind(this));
            connection.on('ChatterSaid', function(message) {
                this.messages.push({
                    username: message.chatterName,
                    message: message.content,
                    date: new Date()
                });
            }.bind(this));
            connection.on('ChatterLeft', function(message) {
                Vue.delete(this.members, message.chatterName);
            }.bind(this));
        }
    });
</script>
</body>

</html>
